<template>
  <a-card>
    <a-col style="margin-bottom: 10px">
      <router-link to="/system/user_role_detail">
        <a-button
          style="margin-bottom: 24px;float:right"
          type="primary"
          class="editable-add-btn"
        >添加权限</a-button>
      </router-link>
    </a-col>
    <a-col :span="24">
      <a-table
        size="small"
        ref="table"
        :columns="columns"
        :data-source="list"
        :row-key="(r,index)=>index"
        :pagination="false"
        :loading="loading"
      >
        <template v-for="(item,index) in inputslot" :slot="item" slot-scope="text,record,rindex">
          <div :key="index">
            <div v-if="rindex==0">
              <a-input size="small" type="text" v-model="queryParam[item]" @pressEnter="gets" />
            </div>
            <div v-else>{{ text }}</div>
          </div>
        </template>
        <span slot="action" slot-scope="text, record,index">
          <template v-if="index==0">
            <a @click="gets">搜索</a>
          </template>
          <template v-else>
            <router-link :to="`/system/user_role_detail/${record.id}`">修改</router-link>
            <a-divider type="vertical" />
            <a-popconfirm title="确定要删除吗" @confirm="del(record)">
              <a-icon slot="icon" type="question-circle-o" style="color: red" />
              <a style="color: red">删除</a>
            </a-popconfirm>
          </template>
        </span>
        <template slot="footer">
          <div style="overflow:hidden">
            <a-pagination
              v-model="pagination.pageNo"
              hide-on-single-page
              :page-size="pagination.pageSize"
              :total="pagination.totalCount"
              style="float: right;"
              @change="pagechange"
              size="small"
              show-quick-jumper
            ></a-pagination>
          </div>
        </template>
      </a-table>
    </a-col>
  </a-card>
</template>

<script>
import { del } from '@/utils/common'
const columns = [
  {
    title: '权限名称',
    dataIndex: 'name',
    width: '150px',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '创建日期',
    dataIndex: 'create_time'
  },
  {
    title: '最近修改时间',
    dataIndex: 'modify_time'
  },
  {
    title: '操作',
    width: '150px',
    scopedSlots: {
      customRender: 'action'
    }
  }
]
export default {
  components: {},
  data: function() {
    return {
      columns,
      list: [],
      pagination: { total: 0, pageSize: 20, pageNo: 1 },
      queryParam: {},
      inputslot: ['name'],
      loading: true
    }
  },
  created() {},
  activated() {
    this.gets()
  },
  methods: {
    gets() {
      this.loading = true
      this.$get('/api/user/user_role_gets', Object.assign(this.queryParam, this.pagination)).then(res => {
        this.list = res.data ? [this.queryParam].concat(res.data) : [this.queryParam]
        this.pagination.totalCount = res.totalCount
        this.loading = false
      })
    },
    pagechange(a, b) {
      this.pagination.pageNo = a
      this.gets()
    },
    del(record) {
      del('user_role', record.id).then(() => {
        this.gets()
      })
    }
  }
}
</script>

<style scoped>
</style>